<template>
	<view class="bigBox">
		<view class="headerBox">
			站址信息设置
		</view>
		<view class="container">
			<view class="item">
				<view class="label">站址名称</view>
				<input type="text" v-model="form.name" placeholder="请输入站址名称" />
				<view class="btn" @click="setName">
					名称设置
				</view>
			</view>
			<view class="item">
				<view class="label">站址代码</view>
				<input type="text" v-model="form.code" placeholder="请输入站址代码" />
				<view class="btn" @click="setCode">
					代码设置
				</view>
			</view>
		</view>
		<tabbar active="4"></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/Tab_bar.vue'
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				form: {
					name: '',
					code: ''
				}
			}
		},
		onLoad() {

		},
		methods: {
			// 名称设置
			setName() {
				console.log(this.form.name)
			},
			// 代码设置
			setCode() {
				console.log(this.form.code)
			}
		}
	}
</script>

<style lang="less" scoped>
	.bigBox {
		background: #FFFFFF;

		.headerBox {
			height: 46.5px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-bottom: 1px solid #E5E7EB;
			font-feature-settings: "kern" on;
			font-family: Roboto;
			font-size: 15.75px;
			font-weight: 500;
		}

		.container {
			padding: 0 14px;
			box-sizing: border-box;

			.item {
				display: flex;
				flex-direction: column;
				padding-top: 9.55px;
				margin-bottom: 20px;

				.label {
					height: 18px;
					line-height: 18px;
					color: #4B5563;
					font-size: 12.25px;
					margin-bottom: 6.5px;
				}

				input {
					height: 42px;
					line-height: 42px;
					background: #F9FAFB;
					font-family: Roboto;
					font-size: 14px;
					padding-left: 14px;
					margin-bottom: 7px;
				}

				.btn {
					height: 42px;
					line-height: 42px;
					border-radius: 4px;
					background: #3B82F6;
					text-align: center;
					font-family: Roboto;
					font-size: 12.25px;
					color: #ffffff;
				}
			}
		}
	}
</style>